<template>

	<view class="page">
		<image style="width: 100%;height: 100vh;position: fixed;top: 0;z-index: -1;" src="/static/images/bj222.png"></image>
		<u-navbar :bgColor="bgColor" :fixed="false" title="随访详情" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<view class="top">


			<!-- 第一步++++++++++++++++++++++++++++ -->
			<view>
				<view class="row_a_c space-between" style="margin-top: 50rpx;">

					<view class="row">
						<view>
							<image class="ygg" src="/static/images/ygg.png"></image>
							<!-- <image class="ygg" src="/static/images/nyy.png"></image>
						<image class="ygg" src="/static/images/nyyh.png"></image> -->
						</view>
						<view class="yycg">第一次随访</view>
					</view>

					<view class="row">
						<view class="row_a_c">
							<view class="sswz">收起</view>
							<!-- <view class="sswz">详情</view> -->
						</view>

						<view class="row_a_c">
							<u-icon name="arrow-up" color="#27CCBB"></u-icon>
							<!-- <u-icon name="arrow-down" color="#27CCBB"></u-icon> -->
						</view>
					</view>

				</view>

				<view class="itema">
					<view class="sfdx">随访对象</view>
					<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change"></u--input>
					<view class="sfdx">随访人员</view>
					<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					<view class="sfdx">随访内容</view>
					<u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
					<view class="sflz">随访验证</view>
					<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change"></u--input>
				</view>

			</view>
			<!-- 第一步============================ -->
			<view class="xiana"></view>

			<!-- 第二步++++++++++++++++++++++++++++ -->
			<view>
				<view class="row_a_c space-between" style="margin-top: 50rpx;">

					<view class="row">
						<view>
							<image class="ygg" src="/static/images/ygg.png"></image>
							<!-- <image class="ygg" src="/static/images/nyy.png"></image>
						<image class="ygg" src="/static/images/nyyh.png"></image> -->
						</view>
						<view class="yycg">第二次随访</view>
					</view>

					<view class="row">
						<view class="row_a_c">
							<view class="sswz">收起</view>
							<!-- <view class="sswz">详情</view> -->
						</view>

						<view class="row_a_c">
							<u-icon name="arrow-up" color="#27CCBB"></u-icon>
							<!-- <u-icon name="arrow-down" color="#27CCBB"></u-icon> -->
						</view>
					</view>

				</view>






			</view>
			<!-- 第二步============================ -->


		</view>

		<view @click="submit" class="butt center">确认随访</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: 0,
				range: [
					{ value: 0, text: "篮球" },
					{ value: 1, text: "足球" },
					{ value: 2, text: "游泳" },
				],
				title: '已成交(120)',
				bgColor: 'rgba(0, 31, 63, 0)',
			};
		},
		methods: {
			toUrl(url) {
				this.navTo(url);
			},
		},
	};
</script>
<style scoped lang="scss">
	.top {
		padding: 32rpx;
	}

	.ygg {
		width: 48rpx;
		height: 48rpx;
	}

	.yycg {
		font-weight: 500;
		font-size: 32rpx;
		color: #3D3D3D;
		margin-left: 16rpx;
	}

	.sswz {
		font-weight: 400;
		font-size: 24rpx;
		color: #27CCBB;
		margin-right: 8rpx;
	}

	.itema {
		width: 622rpx;
		height: 832rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 16rpx;
		margin-left: auto;
		margin-right: 0;
		padding: 32rpx;

	}

	.yytime {

		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-bottom: 16rpx;

	}

	.xiana {
		width: 2rpx;
		height: 910rpx;
		border: 4rpx solid #27CCBB;
		position: fixed;
		top: 300rpx;
		left: 50rpx;
	}

	.xianb {
		width: 2rpx;
		height: 350rpx;
		border: 4rpx solid #27CCBB;
		position: fixed;
		top: 610rpx;
		left: 50rpx;
	}


	.itemb {
		width: 622rpx;
		height: 320rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 32rpx;
		margin-left: auto;
		margin-right: 0;
	}

	.tx {
		width: 96rpx;
		height: 96rpx;
		border-radius: 96rpx;
		margin-right: 32rpx;
	}

	.name {
		font-weight: 800;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-right: 48rpx;
	}

	.age {

		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.85);

	}

	.nv {
		width: 24rpx;
		height: 24rpx;
		margin-top: 5rpx;
		margin-left: 12rpx;
	}

	.copy {
		width: 24rpx;
		height: 24rpx;
	}

	.tel {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 8rpx;
	}

	.kss {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 8rpx;
	}

	.itemxian {
		width: 100%;
		height: 2px;
		border-top: 2px dashed #D0D0D0;
		margin: 20px 0;
	}

	.genduo {
		font-weight: 400;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.26);
	}

	.jzz {
		width: 136rpx;
		height: 52rpx;
		background: #1FA194;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;

	}

	.sfdx {
		font-weight: 400;
		font-size: 24rpx;
		color: #1FA194;
		margin-bottom: 32rpx;
		margin-top: 32rpx;
	}

	::v-deep .u-border {
		height: 72rpx;
		background: #FAFAFA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border-width: 0rpx !important;
	}


	::v-deep .uni-select {
		height: 72rpx;
		background: #FAFAFA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border-width: 0rpx !important;
	}

	::v-deep .u-textarea__field {
		background: #FAFAFA;
		width: 100%;
		padding: 10rpx;
		height: 180rpx !important;
	}


	::v-deep .u-textarea {
		padding: 0rpx !important;
	}

	.sflz {
		font-weight: 400;
		font-size: 24rpx;
		color: #1FA194;
		margin-bottom: 32rpx;
		margin-top: 132rpx;
	}

	.butt {
		width: 690rpx;
		height: 80rpx;
		background: #27CCBB;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 150rpx;
		left: 30rpx;
	}
</style>